<!--  -->
<template>
    <div>
      <mt-header title="编辑地址">
      <router-link  to  slot="left">
        <mt-button icon="back" @click="$router.back(-1)" style="color:black"></mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <div class="border">
        <mt-field label="姓名" placeholder="请输入姓名" v-model="Name"></mt-field>
        <mt-field label="手机" placeholder="请输入手机号" type="tel" v-model="Phone"></mt-field>  
        <div class="selectAdress"  @click="select()">
          <p>地区</p>
          <div v-if="this.OldValue">
            {{AdressData.Province }}/{{ AdressData.city}}/{{ AdressData.District }}
          </div>
          <div v-else>
            {{ myAddressProvince }}/{{ myAddressCity }}/{{ myAddresscounty }} 
          </div>
        </div>
        <mt-field label="详细地址" placeholder="街道门牌、楼层房间号等信息" v-model="AdressDetail"></mt-field>
        <mt-cell title="设为默认收货地址">
          <mt-switch v-model="value"></mt-switch>
        </mt-cell>
        <div class="button" @click="Save()" >
        <p>保存</p>
        </div>  
        <div class="button" id="delete" @click="Delete()" >
        <p>删除</p>
        </div>  
        <mt-popup
        v-model="popupVisible"
        position="bottom"
        closeOnClickModal="false">
        <div class="content" :style="{ width: windowWidth+ 'px' }">
          <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
         </div>
       </mt-popup>
      </div>
    </div>
    </template>
    
    <script>
import myaddress from "../assets/address.json";
import { Toast } from 'mint-ui';
    // console.log(myaddress);/
    export default {
    data() {
    return {
      uid:"",
      Aid:"",
      AdressData:"",
      Name:"",
      Phone:"",
      Adress:"",
      AdressDetail:"",
      IsAdress:"",
      popupVisible:false,
      OldValue:true,
      value:false,
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      myAddressSlots: [
        // 省
        {
          flex: 1,
          defaultIndex: 1,
          values: Object.keys(myaddress), //省份数组
          className: "slot1",
          textAlign: "center"
        },
        // 市
        {
          flex: 1,
          values: [],
          className: "slot2",
          textAlign: "center"
        },
      
        // 区
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center"
        }
      ],
      myAddressProvince: "省",
      myAddressCity: "市",
      myAddresscounty: "区/县"
    }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
    
    },
    watch:{
      windowWidth (val) {
          let that = this;
          console.log("实时屏幕宽度：",val, that.windowHeight );
          }
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    // 判断登录状态
    let userInfo=JSON.parse(localStorage.getItem("userInfo")); //去除localStoreage中的登录状态
    this.uid=userInfo.uid
    console.log(this.uid)
     // 获取传入的参数
     this.Aid=this.$route.params.Aid
      this.$nextTick(() => {
      //vue里面全部加载好了再执行的函数   （类似于setTimeout）
      this.myAddressSlots[0].defaultIndex = 0;
      // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
      //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
     this.getAdressData()
    });
    var that = this;
     // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
            return (() => {
                window.fullWidth = document.documentElement.clientWidth;
                that.windowWidth = window.fullWidth; // 宽
                // console.log("我是屏幕的宽度",that.windowWidth)
            })()
          };
         },
    methods:{
        onMyAddressChange(picker, values) {
      // console.log(picker, values);
      if (myaddress[values[0]]) {
        //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
        picker.setSlotValues(1, Object.keys(myaddress[values[0]])); //  Object.keys()会返回一个数组，当前省的数组
        picker.setSlotValues(2, myaddress[values[0]][values[1]]); //  区/县数据就是一个数组
        // console.log("省", picker.getSlotValues(0), picker.getSlotValue(0));
        // console.log("市", picker.getSlotValues(1), picker.getSlotValue(1));
        // console.log("区/县", picker.getSlotValues(2), picker.getSlotValue(2));
        // console.log(picker.getValues());
        this.myAddressProvince = values[0];
        this.myAddressCity = values[1];
        this.myAddresscounty = values[2];
      }
       },
       getAdressData(){
            console.log(this.Aid)
            var url= `/GetEditAdress?Aid=${this.Aid}`
            this.axios.get(url).then(res=>{
                this.AdressData=res.data.result[0]
                this.Name=this.AdressData.Name
                this.Phone=this.AdressData.Phone
                this.AdressDetail=this.AdressData.AdressDetail
                console.log(this.AdressData)
                this.value=this.AdressData.IsAdress==0 
            })
       },
       select(){
        this.popupVisible=true
        this.OldValue=false
       },
       Delete(){
        var url= `/DeleteAdress?Aid=${this.Aid}`
        this.axios.get(url).then(res=>{
            console.log(res)
            if(res.data.code==200){
                this.$router.push({
                        path:"/AdressSet"
                    })
                this.err("删除成功")
            }
        })
       },
       Save(){
         var a=0
         var url=""
        if(this.value){
          a=0
        }else{
          a=1
        }

            if(this.OldValue){
                // 如果为真 则说明用户未修改地址
                url= `/EditAdress?uid=${this.uid}&Aid=${this.Aid}&Name=${this.Name}&Phone=${this.Phone}&myAddressProvince=${this.AdressData.Province}&myAddressCity=${this.AdressData.city}&myAddresscounty=${this.AdressData.District}&AdressDetail=${this.AdressDetail}&value=${a}`
                console.log("真的",url)
            this.axios.post(url).then(res=>{
              console.log(res)
              this.err("保存成功")
              this.$router.push({
                        path:"/AdressSet"
                    })
            })
            }else{
                // 如果为假 则说明用户修改地址
                 url=`/EditAdress?uid=${this.uid}&Aid=${this.Aid}&Name=${this.Name}&Phone=${this.Phone}&myAddressProvince=${this.myAddressProvince}&myAddressCity=${this.myAddressCity}&myAddresscounty=${this.myAddresscounty}&AdressDetail=${this.AdressDetail}&value=${a}`
                console.log("为假的",url)
            this.axios.post(url).then(res=>{
              console.log(res)
              this.err("保存成功")
              this.$router.push({
                        path:"/AdressSet"
                    })
                 })  
            }
        
       },
       err(a){
          this.toastInstanse=Toast(a);
      },
    }
    }
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
    .mint-header{
        color: black;
        background-color: white;
        font-size: 10px;
    }
    
    .border{
      margin: 10px;
    }
    
    .selectAdress {
      width: 100%;
      height: 48px;
      /* background-color: aqua; */
      padding-left: 10px;

    }
    .selectAdress p{
      line-height: 48px;
      font-size: 10px;
      height: 48px;
      width: 105px;
      text-align: start;
      display:inline-block;
      overflow: hidden;

    }
    .selectAdress div{
      display:inline-block;
      font-size: 10px;
      height: 48px;
      line-height: 48px;
      width: 60%;
      overflow: hidden;
    }

    /* 按钮样式 */
    .button{
    width: 80%;
    margin: 15px 8%;
    bottom: 0;
    }
    .button p{
        background-color: rgb(27, 174, 174);
        color: white;
        width: 100%;
        text-align: center;
        font-size: 10px;
        border-radius: 20px;
        line-height: 30px;
    }
    #delete p{
        background-color: aliceblue;
        color: black;
    }
    </style>        